<template>
	<div class="list-box">
		<el-button type="primary" @click="handleAdd">
			<el-icon>
				<Plus />
			</el-icon> 新增
		</el-button>
		<el-table :data="scriptList" style="width: 100%; margin-top: 10px;">
			<el-table-column type="index" label="序号" align="center" width="55" />
			<el-table-column property="scriptId" label="脚本ID" align="center"></el-table-column>
			<el-table-column property="scriptName" label="脚本名称" align="center"></el-table-column>
			<el-table-column property="scriptContent" label="脚本内容" align="center"></el-table-column>
			<el-table-column property="userName" label="作者名" align="center"></el-table-column>
			<el-table-column property="scriptStatus" label="脚本状态" align="center"></el-table-column>
			<el-table-column label="操作" align="center">
				<template #default="scope">
					<el-button link type="primary" size="small" @click="handleUpdate(scope.row)">
						<el-icon>
							<EditPen />
						</el-icon> 编辑
					</el-button>
					<el-button link type="primary" size="small" @click="handleDelete(scope.row)">
						<el-icon>
							<Delete />
						</el-icon> 删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 对话框 -->
		<el-dialog v-model="showDialog" :title="dialogTitle" width="500">
			<component :is="showComp" v-if="showComp" :scriptId="showScriptId" @refreshEvent="handleRefresh"></component>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ElTable,
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		onMounted,
		ref
	} from 'vue'
	import axios from 'axios'

	import {
		useRouter
	} from 'vue-router'

	// 导入新增或者修改组件
	import ScriptAdd from './add.vue'
	import ScriptEdit from './edit.vue'
	// 路由实例对象

	const router = useRouter()

	// 初始化弹窗
	const showDialog = ref(false)
	// 弹窗标题
	const dialogTitle = ref('')
	// 动态切换组件
	const showComp = ref(null)
	// 传递的scriptId参数
	const showScriptId = ref(null)

	// 初始化脚本列表数据
	const scriptList = ref([])
	// 监听挂载成功的回调函数
	onMounted(() => {
		getScriptData()
	})

	// 封装一个方法 用于获取脚本列表数据
	const getScriptData = () => {
		axios.get('/api/script/script/list').then(res => {
			//console.log(res);
			if (res.data.code == 200) {
				scriptList.value = res.data.data
			} else {
				scriptList.value = []
			}
		}).catch(err => {})
	}
	// 监听点击新增按钮时 执行的方法
	const handleAdd = () => {
		showDialog.value = true
		dialogTitle.value = '新增脚本'
		showComp.value = ScriptAdd
		showScriptId.value = null
	}
	// 监听点击修改按钮时 执行的方法
	const handleUpdate = (row) => {
		showDialog.value = true
		dialogTitle.value = '修改脚本'
		showComp.value = ScriptEdit
		showScriptId.value = row.scriptId
	}
	// 监听点击删除按钮时 执行的方法
	const handleDelete = (row) => {
		ElMessageBox.confirm(
				'确认要删除选中的脚本信息吗?',
				'提示信息', {
					confirmButtonText: '是',
					cancelButtonText: '否',
					type: 'warning',
				}
			)
			.then(() => {
				axios.delete('/api/script/script/' + row.scriptId).then(res => {
					if (res.data.code == 200) {
						ElMessage({
							message: '删除成功',
							type: 'success'
						})
						// 删除成功后 需要重新再次请求最新的脚本数据
						getScriptData()
					} else {
						ElMessage({
							message: '删除失败',
							type: 'error'
						})
					}
				}).catch(err => {})
			})
	}

	// 监听新增或者修改子组件回调刷新 
	const handleRefresh = () => {
		showDialog.value = false
		showScriptId.value = null
		// 刷新脚本信息列表
		getScriptData()
	}
</script>

<style>
</style>